<template>
  <view class="page-container">
    <!-- 新书严选模块 -->
    <view class="card-container">
      <view class="header">
        <text class="title">新书严选 · 第1期</text>
        <text class="more">查看往期 ></text>
      </view>
      <view class="divider"></view>
      <view class="big-card" v-if="load" @click="goRead(novel.novelId)">
        <image 
          class="big-card-img" 
          :src="novel.image"
          mode="aspectFill"
        ></image>
        <view class="big-card-info">
          <text class="big-title">{{novel.novelName}}</text>
          <text class="big-desc">{{novel.des}}</text>
          <text class="big-tag">{{novel.author}}</text>
        </view>
      </view>
      <view class="divider"></view>
      <view class="small-cards">
        <view class="small-card" v-for="(item, index) in cardList" :key="index" style="position: relative;" @click="goRead(item.novelId)">
          <image 
            class="small-card-img" 
            :src="item.image"
            mode="aspectFill"
          ></image>
          <view 
            class="small-card-badge" 
            :style="{ backgroundColor: badgeColors[index % badgeColors.length] }"
          >
            {{ index + 1 }}
          </view>
          <view class="small-card-info">
            <text class="small-title">{{ item.novelName }}</text>
            <text class="small-tag">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 潜力新书模块（原有） -->
    <view class="newBook">
      <view class="newBook-header">
        <text class="newBook-title">潜力新书</text>
        <text class="newBook-more">查看更多 ></text>
      </view>
      <view class="newBook-cards">
        <view class="newBook-card" v-for="(item, idx) in newBookList" :key="idx" @click="goRead(item.novelId)">
          <image 
            class="newBook-img" 
            :src="item.image" 
            mode="aspectFill"
          ></image>
          <text class="newBook-title-text">{{ item.novelName }}</text>
          <text class="newBook-tag">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 新书首发模块（新增） -->
    <view class="newBookLaunch">
      <view class="newBookLaunch-header">
        <text class="newBookLaunch-title">新书首发</text>
        <view class="refresh-btn" @click="handleRefresh">
          <text class="refresh-text">换一换</text>
          <uni-icon 
            type="refresh" 
            size="32" 
            color="#999"
            :class="{ rotate: isRefreshing }"
          ></uni-icon>
        </view>
      </view>
      <view class="newBookLaunch-cards">
        <view class="newBookLaunch-card" v-for="(item, idx) in newBookLaunchList" :key="idx" @click="goRead(item.novelId)">
          <image 
            class="newBookLaunch-img" 
            :src="item.image" 
            mode="aspectFill"
          ></image>
          <text class="newBookLaunch-title-text">{{ item.novelName }}</text>
          <text class="newBookLaunch-tag">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 新书精选模块（新增） -->
    <view class="newBookSelection">
      <view class="newBookSelection-header">
        <text class="newBookSelection-title">新书精选</text>
        <text class="newBookSelection-more">更多 ></text>
      </view>
      <view class="newBookSelection-list">
        <view class="newBookSelection-item" v-for="(item, index) in newBookSelectionList" :key="index" @click="goRead(item.novelId)">
          <image 
            class="newBookSelection-img" 
            :src="item.image" 
            mode="aspectFill"
          ></image>
          <view class="newBookSelection-info">
            <text class="newBookSelection-title-text">{{ item.novel }}</text>
            <text class="newBookSelection-meta">{{ item.author }}.{{item.status}}.{{item.count / 10000}}万</text>
            <text class="newBookSelection-desc">{{ item.des }}</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import {APiGetNewNovelrank,APigetPotentialNewBook,APigetNewBookReleases,ApiGetNewNovel} from "../api/novel.js"

// 新书严选的小卡片数据
const cardList = ref([])
const novel = ref()
const load = ref(false)

const getNewrank = async ()=>{
	let res = await APiGetNewNovelrank()
	novel.value = res[0]
	load.value = true
	// 移除cardList.value中的第一个元素
	cardList.value = res
	cardList.value.shift()
}

// 潜力新书的数据
const newBookList = ref([])
const getPotential = async()=>{
	let res = await APigetPotentialNewBook()
	newBookList.value = res
}

// 新书首发数据
const newBookLaunchList = ref([])
//获取新首发
const getNewBookReleases  = async()=>{
	let res = await APigetNewBookReleases()
	newBookLaunchList.value = res
}

// 新书精选数据
const newBookSelectionList = ref([])
//获取精选新书
const getNewBook = async()=>{
	let res = await ApiGetNewNovel()
	newBookSelectionList.value = res
}

// 刷新图标状态和处理函数
const isRefreshing = ref(false);

const handleRefresh = () => {
  isRefreshing.value = true;
  // 模拟刷新数据
  setTimeout(() => {
    // 这里可以添加实际的数据刷新逻辑
    isRefreshing.value = false;
  }, 500);
};

// 小卡片数字图标颜色数组
const badgeColors = ref([
  '#FF6B6B', '#4ECDC4', '#FFD166', '#39A552', 
  '#2EC4B6', '#E71D36', '#8D99AE', '#FDFFFC'
]);

onMounted(()=>{
	//获取综合最高的小说
	getNewrank()
	// 潜力新书的数据
	getPotential()
	//获取新书首发
	getNewBookReleases()
	//获取精选新书
	getNewBook()
})

// 跳转到阅读页面
const goRead = (val) => {
  uni.navigateTo({
    url: `/pages/novel/bookCover?bookId=` + val
  });
};

</script>

<style lang="less" scoped>
.page-container {
  padding: 30rpx 24rpx;
  background-color: #f8f8f8;
}

/* ===================== 新书严选模块 ===================== */
.card-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24rpx;  
  .title {
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }  
  .more {
    font-size: 28rpx;
    color: #999;
  }
}
.divider {
  height: 2rpx;
  background-color: #f5f5f5;
  margin: 24rpx 0;
}
.big-card {
  display: flex;
  margin-bottom: 32rpx;  
  .big-card-img {
    width: 180rpx;
    height: 240rpx;
    border-radius: 12rpx;
    margin-right: 24rpx;
  }  
  .big-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }  
  .big-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
  }  
  .big-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
  }  
  .big-tag {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #999;
    background: #f5f5f5;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    align-self: flex-start;
  }
}
.small-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;  
  .small-card {
    width: 48%;
    margin-bottom: 24rpx;
    display: flex;
    position: relative; /* 关键：让badge相对于卡片定位 */
  }  
  .small-card-img {
    width: 120rpx;
    height: 160rpx;
    border-radius: 10rpx;
    margin-right: 16rpx;
  }  
  .small-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }  
  .small-title {
    font-size: 26rpx;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
  }  
  .small-tag {
    font-size: 22rpx;
    color: #999;
    background: #f5f5f5;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    align-self: flex-start;
    margin-top: 8rpx;
  }
  
  /* 新增：小卡片数字图标样式 */
  .small-card-badge {
    position: absolute;
    top: 8rpx;
    left: 8rpx;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #fff;
    border-radius: 8rpx; /* 方形圆角，可改为50%实现圆形 */
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
    z-index: 10;
  }
}

/* ===================== 潜力新书模块 ===================== */
.newBook {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
}
.newBook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  .newBook-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }
  .newBook-more {
    font-size: 28rpx;
    color: #999;
  }
}
.newBook-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.newBook-card {
  width: 22%; 
  margin-bottom: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.newBook-img {
  width: 100%;
  height: 200rpx; 
  border-radius: 12rpx;
  margin-bottom: 12rpx;
}
.newBook-title-text {
  font-size: 26rpx;
  color: #333;
  text-align: center;
  margin-bottom: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;     
  -webkit-line-clamp: 2;    
  -webkit-box-orient: vertical; 
}
.newBook-tag {
  font-size: 22rpx;
  color: #999;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

/* ===================== 新书首发模块 ===================== */
.newBookLaunch {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}
.newBookLaunch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.newBookLaunch-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
}
.refresh-btn {
  display: flex;
  align-items: center; /* 文字与图标垂直居中 */
  cursor: pointer; /* 显示手型光标 */
}
.refresh-text {
  font-size: 28rpx;
  color: #999;
  margin-right: 8rpx;
}
.newBookLaunch-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 卡片均匀分布 */
}
.newBookLaunch-card {
  width: 22%; /* 四列布局，留出间距 */
  margin-bottom: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center; /* 内容居中 */
}
.newBookLaunch-img {
  width: 100%;
  height: 200rpx; /* 封面高度适配 */
  border-radius: 12rpx;
  margin-bottom: 12rpx;
}
.newBookLaunch-title-text {
  font-size: 26rpx;
  color: #333;
  text-align: center;
  margin-bottom: 6rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;     
  -webkit-line-clamp: 2;    /* 限制2行 */
  -webkit-box-orient: vertical; 
}
.newBookLaunch-tag {
  font-size: 22rpx;
  color: #999;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

/* ===================== 新书精选模块 ===================== */
.newBookSelection {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
  margin-top: 30rpx; /* 新增：上边距 */
}
.newBookSelection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  .newBookSelection-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }
  .newBookSelection-more {
    font-size: 28rpx;
    color: #999;
  }
}
.newBookSelection-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx; /* 条目间距 */
}
.newBookSelection-item {
  display: flex;
  align-items: flex-start; /* 封面与文字顶部对齐 */
}
.newBookSelection-img {
  width: 160rpx; /* 封面尺寸适配 */
  height: 220rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
}
.newBookSelection-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.newBookSelection-title-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 标题单行溢出 */
  margin-bottom: 8rpx;
}
.newBookSelection-meta {
  font-size: 26rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 元信息单行溢出 */
  margin-bottom: 8rpx;
}
.newBookSelection-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 描述3行溢出 */
  -webkit-box-orient: vertical;
}

/* ===================== 新增：刷新按钮动画 ===================== */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate {
  animation: rotate 0.5s linear;
}
</style>  